<template>
  <div class="home" :style="{ 'min-height': minHeight }">
    <van-nav-bar left-arrow class="nav-head">
      <template #left>
        <Back></Back>
      </template>
      <template #right>
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            :clearable="false"
            shape="round"
          />
        </form>
      </template>
    </van-nav-bar>
    <div class="user-bg"></div>
    <div class="user-msg">
      <div class="collect-box">
        <ShopItem
          :dataObj="shopData"
          :itemStyle="itemStyle"
          :boxStyle="boxStyle"
        ></ShopItem>
      </div>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import ShopItem from "../components/ShopItem.vue";
export default {
  name: "Sousuo",
  data() {
    return {
      minHeight: innerHeight + "px",
      value: "",
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      shopData: null,
      itemStyle: {
        width: "calc(100% / 3 )",
        borderRadius: 0,
        padding: "10px 0",
        margin: 0,
      },
      boxStyle: {
        padding: 0,
        borderRadius: "10px",
        backgroundColor: "#fff",
      },
    };
  },
  methods: {
    onSearch(val) {
      
      this.getSearch();
    },
    onCancel() {
      
    },
    getSearch() {
      let name = this.value;
      let appkey = this.appkey;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/search",
        params: {
          appkey,
          name,
        },
      })
        .then((res) => {
          
          this.shopData = res.data.result;
        })
        .catch((err) => {
          
        });
    },
  },
  created() {
    this.value = this.$route.query.name;
    this.getSearch();
  },
  components: {
    Back,
    ShopItem,
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: rgb(245, 245, 245);
}
.nav-head {
  position: sticky;
  top: 0;
}
.user-bg {
  height: 160px;
  background-color: rgb(12, 52, 186);
}
.user-msg {
  width: 100%;
  position: relative;
  top: -40px;
}
/deep/.van-search {
  padding: 0;
}
.collect-box {
  padding: 0 20px;
}
</style>